<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分桌</title>
    <link type="text/css" rel="stylesheet" href="css/default.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="top1">

    <br/>
    <p>排名按姓氏首字母排序</p>
    <br/>



    <input type="checkbox" name="chk" checked class="chk" rel="Reason" value='思思'/>思思<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='美美'/>美美<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='亮亮'/>亮亮<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='朱朱'/>朱朱<br/>
    <input type="checkbox" name="chk" checked  class="chk" rel="Reason" value='金霞'/>金霞<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='弟弟'/>弟弟<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='王莉'/>王莉<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='翔宇'/>翔宇<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='翔宇老公'/>翔宇老公<br/>
    <input type="checkbox" name="chk" checked  class="chk" rel="Reason" value='大宇'/>大宇<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='皓子'/>皓子<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='王泽东'/>王泽东<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='王科'/>王科<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='王雪'/>王雪<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='罗涛'/>罗涛<br/>
    <input type="checkbox" name="chk"  checked class="chk" rel="Reason" value='赵德成'/>赵德成<br/>

    <input type="checkbox" name="chk" class="chk" rel="Reason" value='工具人1'/>工具人1<br/>
    <input type="checkbox" name="chk" class="chk" rel="Reason" value='工具人2'/>工具人2<br/>
    <input type="checkbox" name="chk" class="chk" rel="Reason" value='工具人3'/>工具人3<br/>

    <input type="button" value="点击分桌" onclick="javascript:button_onclick();"/>
</div>

<div id="top2" style="display: none;width: 150px">

    <br>
    <br>
    <br>

    <div style="width: 150px;height: 30px;background-color: red;text-align: center;line-height:30px"></div>
    <div style="width: 55px;height: 60px;float: left;background-color: khaki;text-align: center;line-height:60px"></div>
    <div style="width: 55px;height: 60px;float: right;background-color: lightblue;text-align: center;line-height:60px"></div>
    <div style="width: 150px;height: 30px;margin-top: 60px;background-color: lightskyblue;text-align: center;line-height:30px"></div>
    <br>
    <br>


    <div style="width: 150px;height: 30px;background-color: red;text-align: center;line-height:30px"></div>
    <div style="width: 55px;height: 60px;float: left;background-color: khaki;text-align: center;line-height:60px"></div>
    <div style="width: 55px;height: 60px;float: right;background-color: lightblue;text-align: center;line-height:60px"></div>
    <div style="width: 150px;height: 30px;margin-top: 60px;background-color: lightskyblue;text-align: center;line-height:30px"></div>
    <br>
    <br>


    <div style="width: 150px;height: 30px;background-color: red;text-align: center;line-height:30px"></div>
    <div style="width: 55px;height: 60px;float: left;background-color: khaki;text-align: center;line-height:60px"></div>
    <div style="width: 55px;height: 60px;float: right;background-color: lightblue;text-align: center;line-height:60px"></div>
    <div style="width: 150px;height: 30px;margin-top: 60px;background-color: lightskyblue;text-align: center;line-height:30px"></div>
    <br>
    <br>


    <div style="width: 150px;height: 30px;background-color: red;text-align: center;line-height:30px"></div>
    <div style="width: 55px;height: 60px;float: left;background-color: khaki;text-align: center;line-height:60px"></div>
    <div style="width: 55px;height: 60px;float: right;background-color: lightblue;text-align: center;line-height:60px"></div>
    <div style="width: 150px;height: 30px;margin-top: 60px;background-color: lightskyblue;text-align: center;line-height:30px"></div>
    <br>
    <br>


    <div style="width: 150px;height: 30px;background-color: red;text-align: center;line-height:30px"></div>
    <div style="width: 55px;height: 60px;float: left;background-color: khaki;text-align: center;line-height:60px"></div>
    <div style="width: 55px;height: 60px;float: right;background-color: lightblue;text-align: center;line-height:60px"></div>
    <div style="width: 150px;height: 30px;margin-top: 60px;background-color: lightskyblue;text-align: center;line-height:30px"></div>
    <br>
    <br>


    <div style="width: 150px;height: 30px;background-color: red;text-align: center;line-height:30px"></div>
    <div style="width: 55px;height: 60px;float: left;background-color: khaki;text-align: center;line-height:60px"></div>
    <div style="width: 55px;height: 60px;float: right;background-color: lightblue;text-align: center;line-height:60px"></div>
    <div style="width: 150px;height: 30px;margin-top: 60px;background-color: lightskyblue;text-align: center;line-height:30px"></div>
    <br>
    <br>

    <div style="width: 150px;height: 30px;background-color: red;text-align: center;line-height:30px"></div>
    <div style="width: 55px;height: 60px;float: left;background-color: khaki;text-align: center;line-height:60px"></div>
    <div style="width: 55px;height: 60px;float: right;background-color: lightblue;text-align: center;line-height:60px"></div>
    <div style="width: 150px;height: 30px;margin-top: 60px;background-color: lightskyblue;text-align: center;line-height:30px"></div>
    <br>
    <br>

    <div style="width: 150px;height: 30px;background-color: red;text-align: center;line-height:30px"></div>
    <div style="width: 55px;height: 60px;float: left;background-color: khaki;text-align: center;line-height:60px"></div>
    <div style="width: 55px;height: 60px;float: right;background-color: lightblue;text-align: center;line-height:60px"></div>
    <div style="width: 150px;height: 30px;margin-top: 60px;background-color: lightskyblue;text-align: center;line-height:30px"></div>
    <br>
    <br>

</div>

</body>


<script>
    function button_onclick() {
        var aa = document.getElementsByName("chk");
        var ss = new Array();
        for (var i = 0; i < aa.length; i++) {
            if (aa[i].checked) {
                ss.push(aa[i].value);
            }
        }

        var target = document.getElementById("top1");
        target.style.display = "none";

        var rr = randomilize(ss);

        var target = document.getElementById("top2");
        target.style.display = "block";

        for (var i = 0 ; i <rr.length;i++ ){
            $($("#top2 div")[i]).html(rr[i]);
        }

    }

    function randomilize(arr) {
        var length = arr.length;
        var arr1 = new Array();
        for (var i = 0; i < length; i++) {
            arr1[i] = i;
        }   //建立数组下标数组
        var arr2 = new Array();
        for (var i = 0; i < length; i++) {
            arr2[i] = arr1.splice(Math.floor(Math.random() * arr1.length), 1);
        }  //将数组下标随机打乱
        var arr3 = new Array();
        for (var i = 0; i < length; i++) {
            arr3[i] = arr[arr2[i]];
        }  //将数组按打乱后的下标输出
        return arr3;
    }


</script>
</html>